<template>
    <div id="app">
        <Message :show.sync="show" @update-show="updateShow">
            <template v-slot:title>恭喜</template>
            <template>新增课程成功！</template>
        </Message>
        <img alt="Vue logo" src="./assets/logo.png">
        <CourseAdd @add-course="addCourse"/>
        <CourseList :courses="courses"/>
        <CourseTotal :totalCount="totalCount"/>
        <DirectiveBtn />
    </div>
</template>

<script>
import { getCourses } from '@/api'

import CourseList from '@/components/CourseList.vue'
import CourseAdd from '@/components/CourseAdd.vue'
import CourseTotal from '@/components/CourseTotal.vue'
import Message from '@/components/Message.vue'
import DirectiveBtn from '@/components/DirectiveBtn'

export default {
    name: 'App',
    components: {
        CourseList,
        CourseAdd,
        CourseTotal,
        Message,
        DirectiveBtn
    },
    data() {
        return {
            courses:[],
            // 保存选中项
            selectedCourse:'',
            // courses: ['web全栈','web高级'],
            totalCount:'',
            show: false
        }
    },
    // created钩子中调用接口
    async created () {
        const courses = await getCourses();
        this.courses = courses;
    },
    methods: {
        addCourse(course) {
            this.courses.push({name: course})
            console.log('course', this.courses)
            this.show = true;
        },
        updateShow(bool){
            this.show = bool
        }
    },
    
    // watch: {
    //     // 下面这种不会生效，因为初始化时不会触发
    //     courses(newValue, oldValue) {
    //         this.totalCount = newValue.length + '门'
    //     }  
    // },
    watch: {
        // 这种方式会在初始化时触发
        courses: {
            immediate: true,
            deep: true,
            handler(newValue) {
                this.totalCount = newValue.length + '门'
            }
        }
    },
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
